<template>
  <Card title="总体评分">
    <template #content>
      <div class="content">
        <div>
          <span class="rank">{{ currentScore.rank }}</span>
          级
          <span class="score">{{ score }}</span>
          分
        </div>
        <div class="desc">
          {{ currentScore.desc }}
        </div>
      </div>
    </template>
  </Card>
</template>
<script setup>
defineOptions({
  name: "LeftCard1",
  inheritAttrs: false,
});
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

import { ref, reactive, onMounted, computed, watch } from "vue";
import { deepClone } from "@/utils/func";

import { useUserStore, useManageStore } from "@/stores";
const manageStore = useManageStore();

const score = ref(props.data?.total_eval_score);
const currentScore = reactive({});

watch(
  () => manageStore.activeTime,
  (val) => {
    console.log(val, "时间筛选");
  }
);

onMounted(() => {
  let totalScore = deepClone(TOTAL_SCORE);
  totalScore = totalScore.sort((a, b) => b.score - a.score);
  for (let i = 0; i < totalScore.length; i++) {
    const item = totalScore[i];
    if (score.value > item.score) {
      Object.assign(currentScore, item);
      break;
    }
  }
});
</script>
<style lang="scss" scoped>
.color-green {
  color: #4eaa16;
}
.content {
  padding: 22px 40px 23px 28px;
  height: 100%;
  overflow: auto;
  .rank {
    font-size: 26px;
    color: #4eaa16;
  }
  .score {
    font-size: 32px;
    color: #59c31f;
    font-style: italic;
  }
  .desc {
    line-height: 28px;
    text-indent: 2ch;
  }
}
</style>
